<!-- 车辆详情 -->
<template>
  <div
    class="dashboard-container vehicle-detail"
  >
    <el-card class="search-card-box card-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
        <el-tab-pane label="基本信息" name="first">
          <el-card class="fist-box" v-if="isTrue">
            <el-form ref="basicData" :rules="rules" :model="basicData">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="员工编号" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ basicData.account }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机姓名" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ basicData.name }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属机构" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ basicData.agency.name }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="手机号" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ basicData.mobile }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄" style="margin-bottom: 20px" label-width="80px">
                    <label>{{ basicData.age }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-footer>
              <el-button type="danger" @click="editList">编辑
              </el-button>
            </el-footer>
          </el-card>
          <el-card class="fist-box" v-else>
            <el-form ref="basicData" :model="basicData" :rules="rules">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="员工编号" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="basicData.account" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机姓名" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="basicData.name" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属机构" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="basicData.agency.name" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="手机号" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="basicData.mobile" placeholder="请输入内容" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄" style="margin-bottom: 20px" label-width="80px">
                    <el-input v-model="basicData.age" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-footer>
              <el-button plain @click="console">取消
              </el-button>
              <el-button type="danger" @click="submitForm">保存
              </el-button>
            </el-footer>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">
          <el-card class="fist-box" v-if="isTrue">
            <el-form ref="driverLicenseData" :rules="rules2" :model="driverLicenseData">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="驾驶证号" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.licenseNumber }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="准驾车型" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.allowableType }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="初次领证日期" style="margin-bottom: 20px">
                    <label>{{ driverLicenseData.initialCertificateDate }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="有效期限" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.validPeriod }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾龄" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.driverAge }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶类型" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.licenseType }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="从业资格证" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.qualificationCertificate }}</label>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入场证信息" style="margin-bottom: 20px" label-width="100px">
                    <label>{{ driverLicenseData.passCertificate }}</label>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" style="margin-bottom: 20px" label-width="100px">
                    <div>
                      <img :src="driverLicenseData.picture" alt="">
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-footer>
              <el-button type="danger" @click="editList">编辑
              </el-button>
            </el-footer>
          </el-card>
          <el-card class="fist-box" v-else>
            <el-form ref="driverLicenseData" :model="driverLicenseData" :rules="rules2">
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="驾驶证号" prop="id" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="driverLicenseData.licenseNumber" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="准驾车型" prop="engineNumber" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="driverLicenseData.allowableType" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="初次领证日期" prop="registrationDate" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="driverLicenseData.registrationDate"
                          type="date"
                          format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="有效期限" prop="mandatoryScrap" style="margin-bottom: 20px" label-width="100px">
                    <template>
                      <div class="block">
                        <el-date-picker
                          v-model="driverLicenseData.validPeriod"
                          type="date"
                          format="yyyy-MM-dd"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾龄" prop="overallQuality" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="driverLicenseData.driverAge" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶类型" prop="overallQuality" style="margin-bottom: 20px" label-width="100px">
                    <el-input v-model="driverLicenseData.licenseType" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="从业资格证" prop="allowableWeight" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <el-input v-model="driverLicenseData.qualificationCertificate" placeholder="请输入内容" />
                  </el-form-item>
                  <el-form-item label="入场证信息" prop="allowableWeight" style="margin-bottom: 20px"
                                label-width="100px"
                  >
                    <el-input v-model="driverLicenseData.passCertificate" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="图片信息" prop="picture" style="margin-bottom: 20px" label-width="100px">
                    <div class="img-box" v-if="driverLicenseData.picture>0">
                      <img class="custom-img" :src="driverLicenseData.picture" alt="">
                    </div>
                    <div class="img-box">
                      <el-upload
                        class="avatar-uploader"
                        action="https://slwl-api.itheima.net/manager/files/imageUpload"
                        :headers="headers"
                        :show-file-list="false"
                        :auto-upload="true"
                        :on-success="changePic2"
                      >
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <el-footer>
              <el-button plain @click="console">取消
              </el-button>
              <el-button type="danger" @click="submitLicenseForm">保存
              </el-button>
            </el-footer>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>
<script>

import { getDriver, getDriverLicense, updateDriver, updateDriverLicense } from '@/api/vehicle'
import Cookies from 'js-cookie'

export default {
  name: 'DriverDetail',
  data() {
    return {
      headers: {
        Authorization: Cookies.get('TOKEN')
      },
      activeName: 'first',
      basicData: {},
      isTrue: 'true',
      rules: {
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
      },
      driverLicenseData: {},
      rules2: {
        licenseNumber: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        allowableType: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        initialCertificateDate: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        licenseType: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        qualificationCertificate: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        passCertificate: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        picture: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.isTrue = true
    this.basicData.id = this.$route.query.id
    this.driverLicenseData.id = this.$route.query.id
    this.getList()
    this.getLicenseList()
  },
  methods: {
    changePic2(res) {
      this.driverLicenseData.picture = res.data

    },
    editList() {
      this.isTrue = false
    },
    async getList() {
      const res = await getDriver(this.$route.query.id)
      this.basicData = res.data
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    console() {
      this.isTrue = true
    },
    submitForm() {
      this.$refs.basicData.validate((valid) => {
        if (valid) {
          // 表单验证通过，继续执行保存数据的操作
          const id = this.basicData.userId
          const data = this.basicData
          console.log(data)
          updateDriver(id, data)
            .then(async () => {
              await this.getList()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.isTrue = true
            })
            .catch(e => {
              this.$message({
                message: `操作失败,原因是${e.message}}`,
                type: 'warning'
              })
            })
        } else {
          // 表单验证不通过，可以给出相应的提示或处理
          this.$message.error('表单验证不通过，请检查输入')
        }
      })
    },
    async getLicenseList() {
      const res = await getDriverLicense(this.$route.query.id)
      this.driverLicenseData = res.data
      console.log(this.driverLicenseData, 222)
    },
    submitLicenseForm() {
      this.$refs.driverLicenseData.validate((valid) => {
        if (!valid) {
          return false
        }
        const data = this.driverLicenseData
        updateDriverLicense(data)
          .then(async () => {
            await this.getLicenseList()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.isTrue = true
            this.getLicenseList()
          })
          .catch(e => {
            this.$message({
              message: `操作失败,原因是${e.message}}`,
              type: 'warning'
            })
          })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
label {
  color: #818693;
}

.vehicle-detail {
  ::v-deep .el-container {
    flex-direction: column;
    margin-left: 0px;

  }

  .in {
    height: calc(100vh - 205px);
    // height: 100%;
  }

  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #E5E7EC;
      text-align: left;
      font-size: 14px;

      .aside-item {
        // margin-top: 38px;
        cursor: pointer;

        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }

      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232A;

        &:after {
          content: '';
          display: block;
          background-color: #E15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}

.card-box {
  width: 1190px;
  height: 800px !important;
  margin: 0 auto;
}

.tab {
  margin-left: 20px !important;
}

::v-deep .el-tabs__nav {
  .is-active {
    color: #333 !important;
    font-weight: 700 !important;
  }

  .el-tabs__active-bar {
    background-color: #E15536;
  }
}

.fist-box {
  position: relative;
  height: 650px;
  width: 100%;
}

.el-footer {
  position: absolute;
  padding: 20px;
  width: 100%;
  left: 0px;
  bottom: 0px;
  text-align: center;
  border-top: 1px solid #E5E7EC;
}

.custom-img {
  width: 200px !important; /* 设置图片宽度，并使用 !important 来确保优先级 */
  height: 200px !important; /* 设置图片高度，并使用 !important 来确保优先级 */
}

.img-box {
  width: 100px;
  height: 100px;
  border: 1px solid #D8DDE3;
  border-radius: 4px;
  text-align: center;
  line-height: 100px;
}

::v-deep .el-form-item__label {
  text-align: left;
}
</style>
